<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        body{
            background-color: darkgray;
        }
        .top{
            line-height: 50px;
            text-align: center;
            height: 50px;
            background-color: rgba(47,47,47,0.98);
        }
        .title{
            float: left;
            font-size: 24px;
            color: darkgray;
            margin-left: 15%;
            margin-right: -15%;
        }
        .top input{
            width: 300px;
            height: 25px;
            outline: none;
        }
        .content{
            margin-left: 15%;
        }
        .content span{
            margin-left: 50%;
        }
        .content h2{
            margin-top: 30px;
        }
        .box{
            margin-top: 10px;
            position: relative;
            background-color: white;
            width: 60%;
            height: 32px;
            line-height: 32px;
            border-left: 5px rgb(74, 151, 74) solid;
        }
        .box input{
            height: 24px;
            width: 24px;
            margin-left: 10px;
            margin-top: 4px;
        }
        .box button{
            height: 24px;
            width: 24px;
            position: absolute;
            left: 95%;
            top: 4px;
            border-radius: 50%;
            background: darkgray;
            color:  white;
            font-size:  24px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <p class="title">ToDoList</p>
            <input v-model = "val" type="text" placeholder="添加ToDo">
            <button @click = "addItem">添加</button>
        </div>
        <div class="content">
            <h2>
                正在进行<span>{{ len }}</span>
            </h2>
            <ul>
                <li class="box" v-for="(item, index) in list" v-show = "!item.checked">
                    <input v-model = "item.checked" type="checkbox">
                    {{ item.val }}     
                    <button @click="delFn(index)">-</button>
                </li>
            </ul>

            <h2>
                已经完成<span>{{ list.length - len }}</span>
            </h2>
            <ul>
                <li class="box" v-for="(item, index) in list" v-show = "item.checked">
                    <input v-model = "item.checked" type="checkbox">
                    {{ item.val }}     
                    <button @click="delFn(item)">-</button>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                val: "",
                selected: "all",
                list: []
            },
            computed: {
                len() {
                    return this.list.filter((item) => {
                        return item.checked === false
                    }).length
                }
            },
            methods: {
                delFn(item){
                    this.list.splice(item,1)
                 },
                addItem() {
                    this.list.push({
                        val: this.val,
                        checked: false
                    })
                    this.val = ""
                }
            }
        })
    </script>
</body>
</html>